<template>
	<view class="uni-container">
		<view class="headerCard">
			<view class="card"></view>
		</view>
		<scroll-view class="mainBody" scroll-y="true">
			<view class="cardBody" v-for="(item,index) in  list" :key="index">
				<image class="imagePng" :src="item.url" />
				<view class="textBody">
					<view class="title">{{item.title}}
						<view class="iconBody">￥{{item.number}}</view>
					</view>
					<view class="text">{{item.text}}</view>
					<view>×{{item.value}}</view>
				</view>

			</view>

			<view style="background:#fff">
				<view class="cardBody paddingLeft">
					备注： <textarea placeholder="请备注内容" v-model='textValue' :maxlength="maxLength">
						</textarea>
				</view>
				<text class="floatR">已输入 {{ textValue.length }} / {{ maxLength }} 字</text>
			</view>

		</scroll-view>
		<view class="footerBody">
			应付：<text calss="red">￥ {{value}}</text>
			<view class="addButton" @click="sumbitFun">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				textValue: '',
				maxLength: 50,
				list: [{
						title: '红烧牛肉',
						text: "150g牛肉",
						number: 50,
						value: 1,
						url: 'http://localhost:8080/static/lbt3.png'
					},
					{
						title: '红烧牛肉',
						text: "150g牛肉",
						number: 50,
						value: 1,
						url: 'http://localhost:8080/static/lbt3.png'
					},
					{
						title: '红烧牛肉',
						text: "150g牛肉",
						number: 50,
						value: 1,
						url: 'http://localhost:8080/static/lbt3.png'
					},
					{
						title: '红烧牛肉',
						text: "150g牛肉",
						number: 50,
						value: 1,
						url: 'http://localhost:8080/static/lbt3.png'
					},
					{
						url: 'http://localhost:8080/static/lbt3.png',
						title: '草莓核桃奶盖',
						text: '冷饮',
						number: 15,
						value: 2
					}
				],
				value: 0
			}
		},
		mounted() {
			this.list.forEach((item, index) => {
				let valueNum = item.value * item.number
				this.value += valueNum
			})
			console.log(this.value)
		},
		methods: {
			// 提交
			sumbitFun() {

				uni.navigateTo({
					url: '/pages/dingdanxq/index',
					fail: (res) => {
						console.log(res)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.headerCard {
		height: 260rpx;

		padding: 20rpx 30rpx;

		.card {
			background: #fff;
			width: 100%;
			height: 100%
		}

		// margin-bottom: 25rpx;
		// margin-top: 5rpx;
	}

	.mainBody {
		height: calc(100vh - 510rpx);
		width: calc(100% - 60rpx);
		padding: 20rpx 30rpx;
		margin-bottom: 25rpx;

		.iconBody {
			float: right;
			color: #EC3636;
		}

		.cardBody {
			height: 188rpx;
			background: #fff;
			margin-bottom: 40rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			padding: 30rpx 10rpx 0;

			.imagePng {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.textBody {
				padding: 10rpx;
				width: calc(100% - 160rpx)
			}

			.title {
				text-align: left;
				font-size: 14px;
				font-weight: 500;
			}

			.text {
				text-align: left;
				font-size: 10px;
				font-weight: 350;
				height: 60rpx;
				padding: 0;

			}
		}

		.paddingLeft {
			padding: 10rpx 0 0rpx 25rpx;
			// margin-bottom:0
		}

		textarea {
			background: #f4f5f6;
			height: 80% !important;
			padding: 15rpx;
			width: calc(100% - 130rpx)
		}

		.floatR {
			position: relative;
			// width: 100rpx;
			right: 50rpx;
			font-size: 18rpx;
			bottom: 80rpx;
			float: right;
			// margin-top:-0rpx;
			// z-index:2000

		}
	}

	.footerBody {
		height: 100rpx;
		width: calc(100% - 30rpx);
		display: flex;
		flex-direction: row;
		background: #fff;
		line-height: 100rpx;
		padding: 0 0 0 30rpx;
		justify-content: space-between;
		position: absolute; 
		bottom: 0rpx;
		text {
			color: #EC3636;
			font-size: 18px;
			font-weight: 500;
		}

		.addButton {
			background: #FF922C;
			width: 250rpx;
			border-radius: 30rpx 0 0 0;
			color: #fff;
			line-height: 100rpx;
			font-size: 18px;
			font-weight: 500;
			text-align: center;
		}
	}
</style>
